<template>
	<div class="goods-activity">
    <div class="goods-activity-wrap" :class="actType+'-box'">
      <div class="goods-activity-wrap-left" :class="actType">
        <div
          v-if="actType == 'NeiGou'"
          class="goods-activity-wrap-left-item">
          <div class="left-info">
            <div class="left-top">
              <span class="icon">亲友内购</span>
              <span class="neigou-price" v-html="scaleGoodsPriceFn(detailAll.item_ng_price)"></span>
              <span class="price">售价:<span v-html="priceStr"></span></span>
            </div>
          </div>
        </div>
        <div
          v-else-if="actType == 'MiaoS'"
          class="goods-activity-wrap-left-item">
          <div class="left-info">
            <div class="left-top">
              <span class="icon">{{detailAll.actives_title}}价</span>
              <span class="yen-price" v-html="scaleGoodsPriceFn(detailAll.item_detail.price)"></span>
              <span class="dollar-price" v-if="detailAll.item_detail.dollar_price && detailAll.is_paypal==1">&dollar;{{detailAll.item_detail.dollar_price}}</span>
              <span class="commision" v-if="detailAll.pre_commission>0">{{detailAll.earn_alias}}<span class="symbol">&yen;</span><em>{{detailAll.pre_commission}}</em></span>
            </div>
            <div class="left-bottom">
              <span class="original_price" v-if="displayOriginalPrice==1">
                <s>{{detailAll.original_price_name}}&yen;{{detailAll.item_detail.original_price}}</s>
              </span>
              <span class="limited_number" v-if="detailAll.miao.limit_num>0">每人限购{{detailAll.miao.limit_num}}{{detailAll.item_detail.unit}}</span>

              <span class="point" v-if="detailAll.item_detail.buy_need_points!=0"><i class="plus">+</i><i class="num">{{detailAll.item_detail.buy_need_points}}</i><i class="name">{{detailAll.point_name}}</i></span>
              <span class="point" v-if="detailAll.item_detail.buy_need_virtual_currency!=0"><i class="plus">+</i><i class="num">{{detailAll.item_detail.buy_need_virtual_currency}}</i><i class="name">{{detailAll.virtual_currency_title}}</i></span>
            </div>
          </div>
        </div>
        
        <div
          v-else-if="actType == 'XianSZ'"
          class="goods-activity-wrap-left-item">
          <div class="left-info">
            <div class="left-top">
              <span class="icon" v-if="detailAll.discount_sta==1">限时 ¥{{detailAll.discount}}</span>
              <span class="icon" v-else>限时{{detailAll.discount}}折</span>
              <span class="yen-price" v-html="scaleGoodsPriceFn(detailAll.item_detail.price)"></span>
              <span class="dollar-price" v-if="detailAll.item_detail.dollar_price && detailAll.is_paypal==1">&dollar;{{detailAll.item_detail.dollar_price}}</span>
              <span class="commision" v-if="detailAll.pre_commission>0">{{detailAll.earn_alias}}<span class="symbol">&yen;</span><em>{{detailAll.pre_commission}}</em></span>
            </div>
            <div class="left-bottom">
              <span class="original_price">
                <s>{{detailAll.original_price_name}}&yen;{{detailAll.item_detail.original_price}}</s>
              </span>
              <span class="limited_number" v-if="detailAll.item_discount.limit_num>0">每人限购{{detailAll.item_discount.limit_num}}{{detailAll.item_detail.unit}}</span>

              <span class="point" v-if="detailAll.item_detail.buy_need_points!=0"><i class="plus">+</i><i class="num">{{detailAll.item_detail.buy_need_points}}</i><i class="name">{{detailAll.point_name}}</i></span>
              <span class="point" v-if="detailAll.item_detail.buy_need_virtual_currency!=0"><i class="plus">+</i><i class="num">{{detailAll.item_detail.buy_need_virtual_currency}}</i><i class="name">{{detailAll.virtual_currency_title}}</i></span>
            </div>
          </div>
        </div>

        <div
          v-else-if="actType == 'ZhouQG'"
          class="goods-activity-wrap-left-item">
          <div class="left-info">
            <div class="left-top">
              <span class="icon">周期购</span>
              <span class="yen-price" v-if="detailAll.range_price.end && detailAll.range_price.end-detailAll.range_price.start>=0">
                <span class="start" v-html="scaleGoodsPriceFn(detailAll.range_price.start)"></span> -
                <span class="end" v-html="scaleGoodsPriceFn(detailAll.range_price.end)"></span>
              </span>
              <span class="yen-price" v-else-if="detailAll.range_price.end && detailAll.range_price.end-detailAll.range_price.start<0">
                <span class="start" v-html="scaleGoodsPriceFn(detailAll.range_price.end)"></span> -
                <span class="end" v-html="scaleGoodsPriceFn(detailAll.range_price.start)"></span>
              </span>
              <span class="yen-price" v-html="scaleGoodsPriceFn(detailAll.range_price.start)" v-else></span>
              <span class="commision" v-if="detailAll.pre_commission>0">{{detailAll.earn_alias}}<span class="symbol">&yen;</span><em>{{detailAll.pre_commission}}</em></span>
            </div>
            <div class="left-bottom">
              <span class="original_price">
                <s>{{detailAll.original_price_name}}&yen;{{detailAll.item_detail.original_price}}</s>
              </span>

              <span class="point" v-if="detailAll.item_detail.buy_need_points!=0"><i class="plus">+</i><i class="num">{{detailAll.item_detail.buy_need_points}}</i><i class="name">{{detailAll.point_name}}</i></span>
              <span class="point" v-if="detailAll.item_detail.buy_need_virtual_currency!=0"><i class="plus">+</i><i class="num">{{detailAll.item_detail.buy_need_virtual_currency}}</i><i class="name">{{detailAll.virtual_currency_title}}</i></span>
            </div>
          </div>
        </div>
        
        <div
          v-else-if="actType == 'KanJ'"
          class="goods-activity-wrap-left-item">
          <div class="left-info">
            <div class="left-top">
              <span class="icon">砍价</span>
              <span v-html="scaleGoodsPriceFn(detailAll.item_detail.price)"></span>
              <span v-if="detailAll.item_detail.dollar_price && detailAll.is_paypal==1">&dollar;{{detailAll.item_detail.dollar_price}}</span>
              <span class="commision" v-if="detailAll.pre_commission>0">{{detailAll.earn_alias}}<span class="symbol">&yen;</span><em>{{detailAll.pre_commission}}</em></span>              
            </div>
            <div class="left-bottom">
              <span class="original_price">
                <s>{{detailAll.original_price_name}}&yen;{{detailAll.item_detail.original_price}}</s>
              </span>
              <span class="limited_number" v-if="detailAll.item_bargin.limit_num>0">每人限购{{detailAll.item_bargin.limit_num}}{{detailAll.item_detail.unit}}</span>

              <span class="point" v-if="detailAll.item_detail.buy_need_points!=0"><i class="plus">+</i><i class="num">{{detailAll.item_detail.buy_need_points}}</i><i class="name">{{detailAll.point_name}}</i></span>
              <span class="point" v-if="detailAll.item_detail.buy_need_virtual_currency!=0"><i class="plus">+</i><i class="num">{{detailAll.item_detail.buy_need_virtual_currency}}</i><i class="name">{{detailAll.virtual_currency_title}}</i></span>
            </div>
          </div>
        </div>

        <div
          v-else-if="actType == 'ShiY'"
          class="goods-activity-wrap-left-item">
          <div class="left-info">
            <div class="left-top">
              <span class="icon">免费试用</span>
              <span class="num"><b>{{detailAll.item_try.tryOrder_num}}</b>人申请</span>
              <span class="commision" v-if="detailAll.pre_commission>0">{{detailAll.earn_alias}}<span class="symbol">&yen;</span><em>{{detailAll.pre_commission}}</em></span>
              <span class="rank-name" v-if="detailAll.item_try.rank_name">会员等级:<em>{{detailAll.item_try.rank_name}}</em></span>
            </div>
            <div class="left-bottom">
              <span class="original_price">
                <s>{{detailAll.original_price_name}}&yen;{{detailAll.item_detail.original_price}}</s>
              </span>
              <span class="limited_number" v-if="detailAll.item_try.limit_num>0">活动限购{{detailAll.item_try.limit_num}}{{detailAll.item_detail.unit}}</span>

              <span class="point try_points" v-if="detailAll.item_try.points>0">消耗{{detailAll.point_name}}<em>{{detailAll.item_try.points}}</em></span>
            </div>
          </div>
        </div>
  
        <div
          v-else-if="actType == 'PingT'"
          class="goods-activity-wrap-left-item">
          <div class="left-info">
            <div class="left-top">
              <span class="icon">拼团价</span>
              <span v-html="scaleGoodsPriceFn(detailAll.info.price)"></span>
              <!--      十人团定制 不展示  多少人拼团       -->
              <span class="num" v-if="!detailAll.is_ten_group"><b>{{detailAll.info.num}}</b>人拼团价</span>
              <span class="commision" v-if="detailAll.pre_commission>0 && !detailAll.is_ten_group">{{detailAll.earn_alias}}<span class="symbol">&yen;</span><em>{{detailAll.pre_commission}}</em></span>
            </div>
            <div class="left-bottom">
              <span class="original_price">
                <s>{{detailAll.original_price_name}}&yen;{{detailAll.info.itemInfo.price}}</s>
              </span>
              <!--   十人团定制  不展示没人限购次数     -->
              <span class="limited_number" v-if="detailAll.info.limit>0 && !detailAll.is_ten_group">每人限购{{detailAll.info.limit}}件<!-- {{detailAll.info.unit}} --></span>

              <span class="point" v-if="detailAll.item_detail.buy_need_points!=0"><i class="plus">+</i><i class="num">{{detailAll.item_detail.buy_need_points}}</i><i class="name">{{detailAll.point_name}}</i></span>
              <span class="point" v-if="detailAll.item_detail.buy_need_virtual_currency!=0"><i class="plus">+</i><i class="num">{{detailAll.item_detail.buy_need_virtual_currency}}</i><i class="name">{{detailAll.virtual_currency_title}}</i></span>
            </div>
          </div>
        </div>

        <!-- 多买优惠 -->
        <div
          v-else-if="actType == 'BuyMore'"
          class="goods-activity-wrap-left-item">
          <div class="left-info">
            <div class="left-top">
              <span class="icon">多买优惠</span>
              <span class="yen-price" v-html="scaleGoodsPriceFn(detailAll.item_detail.price)"></span>
              <span class="bmd-txt">{{detailAll.bmd_info.bmd_desc}}</span>
            </div>
            <div class="left-bottom">
            </div>
          </div>
        </div>
        <div
          v-else-if="actType == 'PaiM'"
          class="goods-activity-wrap-left-item">
          <span class="auctioning_title" v-if="isShow">预展中</span>
        </div>
        
      </div>

      <div class="goods-activity-wrap-right" v-if="actType == 'NeiGou'">
        <!-- 内购 -->
      </div>
      <div class="goods-activity-wrap-right" v-else-if="actType == 'MiaoS'">
        <div v-if="detailAll.miao.status==2">秒杀已结束</div>
        <div v-else>
          <div class="time-tip">
            <span class="txt" v-if="detailAll.miao.other_status==1">距结束还剩</span>
            <span class="txt" v-else>距开始还剩</span>
          </div>
          <div v-if="countDownList" class="time-count" v-html="countDownList"></div>
          <div v-else class="time-count">
            <span class="num day">00</span>
            <span class="pot day">天</span>
            <span class="num">00</span>
            <span class="pot">:</span>
            <span class="num">00</span>
            <span class="pot">:</span>
            <span class="num">00</span>
          </div>
        </div>
      </div>

      <div class="goods-activity-wrap-right" v-else-if="actType == 'ZhouQG'">
      </div>
      <div class="goods-activity-wrap-right" v-else-if="actType == 'ShiY'">
      </div>
      <!-- 长期团 -->
      <div class="goods-activity-wrap-right" v-else-if="actType == 'PingT' && detailAll.is_long==1">
        <div class="time-tip group-long">
          <span class="txt">长期团</span>
        </div>
      </div>
      <div class="goods-activity-wrap-right" v-else>
        <div class="time-tip">
          <span class="txt">{{actMsg}}</span>
        </div>
        <div v-if="countDownList" class="time-count" v-html="countDownList"></div>
        <div v-else class="time-count">
          <span class="num">00</span>
          <span class="pot">:</span>
          <span class="num">00</span>
          <span class="pot">:</span>
          <span class="num">00</span>
          <span class="pot">:</span>
          <span class="num">00</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
  /**
   * @Author: yqe@360shop.cn
   * @Date: 2019-12-11 10:34:52
   * @Last Modified by: yqe@360shop.cn
   * @Last Modified time: 2019-12-11 10:34:57
   */
  import { mapGetters } from 'vuex'
  import { scaleGoodsPrice } from '@/utils/index'
  export default Vue.extend({
    name: 'index',
    props: {
      actEndTime: {
        type: String
      },
      actMsg: {
        type: String,
        default: '距开始还剩'
      },
      actType: { // XianSG:限时购
        type: String
      },
      isShow: {
        type: Boolean,
        default: true
      },
      priceStr: {
        type: String
      },
      detailAll: {}
    },
    computed: {
      ...mapGetters(['displayOriginalPrice'])
    },
    data() {
      return {
        countDownList: '',
        interval: null
      }
    },
    watch: {
      actEndTime(val){
        clearInterval(this.interval) // 清除定时器
        this.interval = null
        this.setIntervalTime() // 调取倒计时
      }
    },
    created() {
      this.setIntervalTime() // 调取倒计时
    },

    beforeDestroy() { // 组件的销毁
      clearInterval(this.interval) // 清除定时器
      this.interval = null
    },
    methods: {
      /**
       * 商品价格 整数放大
       */
      scaleGoodsPriceFn(price, className) {
        return scaleGoodsPrice(price, className)
      },
      /**
       * 补全小于10的
       */
      timeFormat(param) {
        return param < 10 ? '0' + param : param
      },
      // 设置定时器做倒计时
      setIntervalTime() {
        this.interval = setInterval(() => {
          this.countDownList = this.getResidueTime(this.actEndTime)
        }, 1000)
      },
      // 获取剩余时间
      getResidueTime(end) {
        const nowtime = new Date().getTime() // 当前时间 毫秒数
        const endTime = Date.parse(new Date(end.replace(/-/g, '/'))) // 结束时间  毫秒数
        const totalSeconds = (endTime - nowtime) / 1000 // 结束时间-当前时间 = 剩余多少时间
        let day = 0
        let hour = 0
        let minute = 0
        let second = 0
        if (totalSeconds > 0) {
          day = parseInt(totalSeconds / 3600 / 24) // 天
          hour = parseInt((totalSeconds / 3600) % 24) // 时
          minute = parseInt((totalSeconds / 60) % 60) // 分
          second = parseInt(totalSeconds % 60) // 秒
        } else {
          day = 0 // 天
          hour = 0 // 时
          minute = 0 // 分
          second = 0 // 秒
          clearInterval(this.interval)
        }
        hour = this.addZero(hour)
        minute = this.addZero(minute)
        second = this.addZero(second)
        const residueTime = `<span class="num day">${day}</span><span class="pot day">天</span><span class="num">${hour}</span><span class="pot">:</span><span class="num">${minute}</span><span class="pot">:</span><span class="num">${second}</span>`

        return residueTime
      },
      // 补齐格式不满10加0
      addZero(n) {
        return n < 10 ? '0' + n : n
      }
    }
  })
</script>
<style lang="scss">
.goods-activity{
  .goods-activity-wrap{
    &.NeiGou-box{
      .price{
        margin:0 0 0 12px;
        font-size:22px;
        text-decoration: line-through;
        .price-scale{
          font-family:initial;
          text-decoration: line-through;
          color:#F7F7F7;
        } 
        .num-font{
          font-size:22px;
        }
      }
    }
    .time-count{
      display:flex;
      justify-content: center;
      align-items:center;
      span{
        font-size: 22px;
        &.num{
          background: #FE1B49;
          color: #fff;
          line-height: 40px;
          width: 36px;
          text-align: center;
          border-radius: 6px;
          &.day{
            background: transparent;
            color: #FE1B49;
          }
        }
        &.pot{
          margin: 0 5px;
          color: #FE1B49;
          &.day{
            margin:0 6px 0 4px;
          }
        }
      }
    }
    .price-scale {
      line-height:1;
      color:#fff;
    }    
  }
  .XianSZ-box{
    .goods-activity-wrap-right{
      .time-tip{
        .txt{
          color:#7F24F2;
        }
      }
      .time-count{
        span{
          &.pot{
            color:#7F24F2;
          }
          &.num{
            background:#7F24F2;
            &.day{
              color:#7F24F2;
              background:transparent;
            }
          }
        }
      }
    }
  }
  .KanJ-box{
    .goods-activity-wrap-right{
      .time-tip{
        .txt{
          color:#FE3A28;
        }
      }
      .time-count{
        span{
          &.pot{
            color:#FE3A28;
          }
          &.num{
            background:#FE3A28;
            &.day{
              color:#FE3A28;
              background:transparent;
            }
          }
        }
      }
    }
  }
}
</style>
<style  lang="scss">
  @import "src/styles/mixin";
  @import "src/styles/variables";
  .goods-activity{
    &-wrap-right{
      .time-count{
        margin-top:10px;
        font-size: 0;        
      }
    }
    &-wrap{
      background: #FFF0EB;
      display: flex;
      min-height: 108px;
      color:#fff;
      .point{
        display:inline-block;
        height:32px;
        line-height:32px;
        padding:0 12px;
        background:#fff;
        border-radius:30px;
        color:#F21228;
      }
      &.NeiGou-box{
        background:#F4594D;
        .goods-activity-wrap-left{
          color:#f7f7f7;
          .left-info{
            .icon{
              color:#F4594D;
            }
          }
        }
        .goods-activity-wrap-right{
          flex:0;
        }
      }
      &.MiaoS-box{
        background:#FFF0EB;
        .goods-activity-wrap-left{
          background:url("https://img.wifenxiao.com/h5-wfx/images/item/detail/goods_MiaoS.png") no-repeat;          
          background-size: 100% 100%;
        }
      }
      &.XianSZ-box{
        background:#EAE5FF;
        .goods-activity-wrap-left{
          background:url("https://img.wifenxiao.com/h5-wfx/images/item/detail/goods_XianSZ.png") no-repeat;          
          background-size: 100% 100%;
          .left-info{
            .icon,.point{
              color:#7F24F2;
            }
          }
        }
      }
      &.ZhouQG-box{
        background:url("https://img.wifenxiao.com/h5-wfx/images/item/detail/goods_ZhouQG.png") no-repeat;          
        background-size: 100% 100%;
        .left-info{
          .icon,.point{
            color:#FF285B;
          }
        }
        .goods-activity-wrap-right{
          flex:0;
        }
      }
      &.KanJ-box{
        background:#FFF2EB;
        .goods-activity-wrap-left{
          background:url("https://img.wifenxiao.com/h5-wfx/images/item/detail/goods_KanJ.png") no-repeat;          
          background-size: 100% 100%;
          .left-info{
            .icon,.point{
              color:#F95F39;
            }
          }
        }
      }
      &.ShiY-box{
        background:url("https://img.wifenxiao.com/h5-wfx/images/item/detail/goods_ShiY.png") no-repeat;          
        background-size: 100% 100%;
        .left-info{
          .icon,.point{
            color:#54A9F5;
          }
          .num{
            b{
              font-size:40px;
            }
          }
        }
        .goods-activity-wrap-right{
          flex:0;
        }
      }
      &.PingT-box{
        background:#FFF0EB;
        .goods-activity-wrap-left{
          background:url("https://img.wifenxiao.com/h5-wfx/images/item/detail/goods_group.png") no-repeat;          
          background-size: 100% 100%;
          .left-info{
            .icon,.point{
              color:#F21228;
            }
          }
        }
      }
      &.BuyMore-box{
        // background:#FFF0EB;
        .goods-activity-wrap-left{
          background:url("https://img.wifenxiao.com/h5-wfx/images/item/detail/goods_bmd.png") no-repeat;          
          background-size: 100% 100%;
          .left-info{
            .icon,.point{
              color:#F4594D;
            }
          }
        }
      }
      
      &-left{
        flex: 1;
        &.PaiM{
            background: url(https://img.wifenxiao.com/h5-wfx/images/activity/goods_acution_bg.png);
            background-size: 100% 100%;
        }
        &-item{
          height:100%;
          padding:20px 30px;
          box-sizing: border-box!important;
        }
        .left-info{
          display:flex;
          flex-direction: column;
          justify-content: center;
          height:100%;
          font-size:22px;
          .left-top{
            display:flex;
            align-items:flex-end;
            flex-wrap:wrap;
            >span{
              margin-right:8px;
              &:last-child{
                margin-right:0;
              }
            }
            .bmd-txt{
              padding-bottom:4px;
              margin-left:20px;
            }
          }          
          .icon{
            display:inline-block;
            height:36px;
            line-height:36px;
            padding:0 12px;
            background:url("https://img.wifenxiao.com/h5-wfx/images/item/detail/activity_icon.png") no-repeat;
            background-size:100% 100%;
            color:#F21228;
          }
          .left-bottom{
            margin-top:12px;
            >span{
              margin-right:6px;
              display:inline-block;
              &:last-child{
                margin-right:0;
              }
            }
          }
        }
        .price{
          color: #fff;
          font-size: 28px;
          margin-bottom: 10px;
          .num{
            font-size: 50px;
          }
          .text{
            font-size: 24px;
          }
          .txt{
            font-size: 24px;
          }
        }
        .auctioning_title{
          line-height: 108px;
          font-size: 32px;
          color:#F7F7F7;
          font-weight: bold;
        }
        .origin-price{
          color: #fff;
          font-size: 24px;
          text-decoration: line-through;
        }
      }
      &-right{
        flex: 0 258px;
        text-align: center;
        display: flex;
        flex-flow: column;
        justify-content: center;
        .time-tip{
          .txt{
            padding-left:12px;
            font-size: 24px;
            color: #FE1B49;
          }
          &.group-long{
            .txt{
              letter-spacing: 2px;
              font-size:42px;
              font-weight:bold;
              font-style:italic;
            }
          }
        }
      }
    }
  }
</style>
